export const useGenerateIcon = (
  props,
  queryPlanList,
  refTPopupProxy,
  modifyPlan,
  currectPlan,
  UpdateRepeatFilter,
  handleClick,
  emit,
  runingPlan,
  isFilterContentChage,
  GetQueryPlanV2,
  isFirstLoad,
  onlyShowIcon,
  $q,
  checkScrollbar
) => {
  // const {props,queryPlanList,refTPopupProxy,modifyPlan,currectPlan,UpdateRepeatFilter,handleClick,emit,runingPlan} = params

  if (props.exclusiveLine == '1') {
    setTimeout(() => {
      checkScrollbar()
    }, 10);
    return (
      <div
        style={
          'display:flex;    justify-content: space-between;    align-items: center;width: 100%;gap:12px'
        }
      >
        <div  class='plan_content_mobile_content'>
        <div class='plan_content_mobile'>
          {(() => {
            let Template = [];
            queryPlanList.value.forEach(ql => {
              Template.push(
                <span
                  id={'id_' + ql.ID.replace(/-/gi, '')}
                  class={
                    runingPlan.value.ID == ql.ID ? 'isChecked' : 'isNotChecked'
                  }
                  style={`border-radius:2px;font-size:12px;padding: 4px 8px;height:24px;display: flex;align-items: center;line-height: 24px;flex: none;${runingPlan.value.ID == ql.ID ? 'color:var(--t-color);background:var(--t-color-background)' : 'background:#F4F4F5'}`}
                  onClick={async () => {
                    if (runingPlan.value.ID == ql.ID) return;
                     isFirstLoad.value = true;
                    ql = await GetQueryPlanV2(ql.ID)
                    refTPopupProxy.value?.hide();
                    modifyPlan.value = Object.assign({}, ql);
                    if (currectPlan.value.ID == ql.ID) return;
                    currectPlan.value = Object.assign({}, ql);
                    UpdateRepeatFilter();
                  }}
                >
                  {ql.Name}
                </span>,
              );
            });
            return Template;
          })()}

        </div>
        </div>

        {/* fas dx-icon icon-t-menu */}
        <span
          class={'fas dx-icon icon-t-filter '}
          onClick={handleClick}
          style={'    position: relative;flex: 0 0 auto;display: flex;gap: 1px;font-size: 11px;justify-content: center;align-items: center;'}
        >
          <i style={"font-style:normal;color:rgba(0,0,0,.8);position:relative;top:-1;font-size:12px"}>
        
          {(()=>{
              if(!onlyShowIcon){
                return $q.lang.label.t_filter
              }
            })()}
          </i>

          {(() => {
            //测试
            if (isFilterContentChage.value) {
              return (
                <tm-badge
                  transparent={true}
                  color='red'
                  floating
                  rounded
                  isDot={true}
                  style={`
                    color: #fff;
                    padding: 2px 4px;
                    border-radius: 4px;
                    font-size: 8px;
                    line-height: 8px;
                    min-height: 8px;
                    font-weight: 400;
                    vertical-align: baseline;

                    `}
                ></tm-badge>
              );
            }
          })()}
        </span>
      </div>
    );
  } else {
    return (
      <i
        class={'fas dx-icon icon-t-filter'}
        onClick={handleClick}
        style={' position: relative;flex: 0 0 auto;display: flex;gap: 1px;font-size: 11px;justify-content: center;align-items: center;'}
      >
       <i style={"font-style:normal;color:rgba(0,0,0,.8);position:relative;top:-1;font-size:12px"}>
       {(()=>{
              if(!onlyShowIcon){
                return $q.lang.label.t_filter
              }
            })()}
          </i>
        {(() => {
          //测试
          if (isFilterContentChage.value) {
            return (
              <tm-badge
                transparent={true}
                color='red'
                floating
                rounded
                isDot={true}
                style={`
                    color: #fff;
                    padding: 2px 4px;
                    border-radius: 4px;
                    font-size: 8px;
                    line-height: 8px;
                    min-height: 8px;
                    font-weight: 400;
                    vertical-align: baseline;

                    `}
              ></tm-badge>
            );
          }
        })()}
      </i>
    );
  }
};
